<template>
    <div style="min-width:809px">
       <div v-if="$route.path == '/personalAdmin/personalList' || $route.path == '/projectAdmin/personalLists' || $route.path == '/projectAdmin/distribution'">
        <div class="vs-search-box" style="padding: 24px 22px 0 0px;">
            <el-form ref="form" :inline="true" :model="form" class="flex1" label-width="90px">
                <el-form-item label="门店">
                    <!-- <el-input style="width:230px" v-model="form.username"></el-input> -->
                    <el-select v-model="form.store_id" @change="form.store_id==form.source_id?form.source_id='':''" style="width:250px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工号">
                    <el-input style="width:250px" v-model="form.number"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input style="width:250px" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input style="width:250px" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="人员来源">
                    <el-select v-model="form.source_id" style="width:250px" clearable placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :disabled="form.store_id==item.id"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位">
                    <el-select v-model="form.position" style="width:250px" clearable placeholder="请选择">
                        <el-option
                            v-for="item in positionData"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入职时间">
                    <el-date-picker
                    style="width:250px"
                        v-model="form.date"
                        type="daterange"
                        value-format="timestamp"
                        range-separator="至"
                        @change="changeTime"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="right">
                <el-button @click="init">重置</el-button>
                <el-button @click="init()" type="primary">查询</el-button>
            </div>
         </div>
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <div class="title-left"> 员工列表 </div>
                <!-- <el-button @click=" $router.push( `/personalAdmin/personalList/editPersonal?title=新增员工` ) "
                 style="margin-left:auto;" type="primary">新增</el-button> -->
            </div>
            <el-table :header-cell-style="{background:'#f5f6f8'}" v-loading="loading" :data="tableData"  style="width: 100%">
                <el-table-column width="60px" type="selection" ></el-table-column>
                <el-table-column width="60px" label="序号" prop="num" ></el-table-column>
                <el-table-column prop="store.title" label="门店" > </el-table-column>
                <el-table-column prop="name" label="姓名"> </el-table-column>
                <el-table-column prop="number" label="工号"> </el-table-column>
                <el-table-column prop="birthday" label="员工生日" width="110"> </el-table-column>
                <el-table-column prop="phone" label="手机号" width="130"> </el-table-column>
                <el-table-column prop="position.title" min-width="100" label="职位"> </el-table-column>
                <el-table-column prop="grade" label="等级"> </el-table-column>
                <el-table-column prop="kill" label="技能" min-width="100">
                    <template slot-scope="scope">
                        <span class="line-2">
                            {{scope.row.kill}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="source.title" label="人员来源"> </el-table-column>
                <el-table-column prop="create_time" label="入职时间" min-width="110">
                    <template slot-scope="scope">
                        {{scope.row.into_time | YMDparseTime}}
                    </template>
                </el-table-column>
                <el-table-column prop="formal_time" label="转正日期" min-width="110">
                    <template slot-scope="scope">
                        {{scope.row.formal_time | YMDparseTime}}
                    </template>
                </el-table-column>
                <el-table-column prop="note" label="备注"> </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        {{scope.row.status ==1?'正常':'离职'}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" width="140"  label="操作"> 
                    <div slot-scope="scope" class="vs-operation">
                        <template v-if="scope.row.status==1">
                            <span class="tab-table-text" @click=" $router.push( `/personalAdmin/personalList/editPersonal?title=查看员工&id=${scope.row.id}` ) " >查看</span>
                            <!-- <span class="tab-table-text" @click=" $router.push( `/personalAdmin/personalList/editPersonal?title=编辑员工&id=${scope.row.id}` ) " >编辑</span> -->
                            <span v-if="scope.row.position.type==1||scope.row.position.type==2" class="tab-huang-text" @click="$router.push(`/staffbution?type=3&name=${scope.row.name}&id=${scope.row.id}` ) " >配置权限</span>
                            <!-- <span class="tab-red-text" @click="diaoc(1,scope.row)">调出</span>
                            <span class="tab-red-text" @click="diaoc(2,scope.row)">离职</span> -->
                        </template>
                        <span v-else class="tab-lv-text" @click="diaoc(3,scope.row)">恢复</span>
                    </div>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="form.page"
                    :page-size="form.limit"
                    layout="prev, pager, next, jumper"
                    :total="form.total">
                </el-pagination>
            </div>
        </div>
        <el-dialog
        :title="['','调出信息','离职信息','员工恢复'][ruleForm.type]"
        :visible.sync="callout"
        width="500px"
        :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item :label="['','调出门店','离职门店','恢复门店'][ruleForm.type]" prop="stay">
                    <el-input readonly v-model="ruleForm.stay"></el-input>
                </el-form-item>
                <el-form-item v-if="ruleForm.type==1" label="调入门店" prop="store_id">
                    <el-select v-model="ruleForm.store_id" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :disabled="item.title==ruleForm.stay"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="['','调出时间','离职时间','恢复日期'][ruleForm.type]" prop="transfer_time">
                    <el-date-picker type="date" placeholder="选择日期" value-format="timestamp" v-model="ruleForm.transfer_time" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item :label="['','调动原因','离职原因','恢复原因'][ruleForm.type]" prop="content">
                    <el-input type="textarea" :rows="4" v-model="ruleForm.content"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button :loading="isBtn" type="primary" @click="stafftransfer">确 定</el-button>
            </span>
        </el-dialog>
       </div>
       <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            callout:false,//调出
            ruleForm:{
                stay:'',
                staff_id:0,//	员工ID
                content:'',//原因
                type:1,//	类型：1调动，2离职
                store_id:'',//	门店ID
                transfer_time:Date.parse(new Date()),//	调动时间
            },
            rules:{
                transfer_time:{ required: true, message: '请选择时间', trigger: 'change' },
                content:{ required: true, message: '请输入原因', trigger: 'blur' },
                store_id:{ required: true, message: '请选择调入门店', trigger: 'change' }
            },
            form:{
                username:'',
                date:'',
                start_time:'',
                stop_time:'',
                store_id:'',
                number:'',
                phone:'',
                position: '',
                name: '',
                store_id:'',
                page:1,
                limit:10,
                total:0,//总数
            },
            loading:false,
            shopList:[],
            isBtn:false,
            canscroll:false,//滚动触发条件
            activeisload:false,//是否加载完成

            tableData: [],
            positionData: []
        };
    },
    filters:{
        typeName(val){
            switch (val) {
                case 1:
                    val = '内部'
                    break;
                case 2:
                    val = '外部'
                    break;
            }
            return val;
        }
    },
    created() {
        // 获取菜单参数 customize_id
        let menu = JSON.parse(localStorage.getItem('menu'))
        this.uniqueStair = localStorage.getItem('uniqueStair') // 子级
        this.uniqueSublevel = localStorage.getItem('uniqueSublevel') // 父级
        console.log(767, this.uniqueStair, this.uniqueSublevel)
        menu.forEach(item => {
        if(item.title === this.uniqueSublevel) {
            localStorage.setItem('customize_id', item.customize_id || '')
        }
        });

        this.homegetStore();
        this.getList();
        this.getPosition()
    },
     mounted() {
        let list_c = document.getElementById('body');
        // list_c.addEventListener("scroll", (e) => {
        //     console.log(e);
        //     if (this.canscroll) {
        //         //是否具有触发条件
        //         let scroll_top = list_c.scrollTop;
        //         let list = this.$refs.list;
        //         let list_height = parseInt(getComputedStyle(list).height);
                
        //         let c_height = parseInt(getComputedStyle(list_c).height);
        //         if (list_height - (scroll_top + c_height) < 200) {
        //             this.canscroll = false; //锁定滚动触发条件
        //             if (this.activeisload) {
        //                 this.form.page++;
        //                 this.getList();
        //             } else {
        //                 console.log("已加载完所有已收藏的商品");
        //             }
        //         }
        //     }
        // });
    },
    methods: {
       async getPosition() {
            let {code,data} = await this.$Http.getPosition();
            if(code){
                this.positionData = data.data
            }
        },
        handleCurrentChange(val){
            this.form.page = val;
            this.getList();
        },
        stafftransfer(){
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                this.isBtn = true;
                let obj = Object.assign({},this.ruleForm);
                obj.transfer_time/=1000
                let {code,data} = await this.$Http.stafftransfer(obj);
                this.isBtn = false;
                if(code){
                    this.$message.success(this.ruleForm.type==1?'调动成功':'离职成功');
                    this.handleClose();
                    this.init();
                }
            });
        },
        diaoc(type,row){
            this.ruleForm = Object.assign(this.ruleForm,{
                type,
                stay:row.store.title,
                staff_id:row.id,
                store_id:row.store_id
            })
            this.callout = true;
        },
        handleClose(dom){
            this.callout = false;
            dom&&dom();
            this.$refs['ruleForm'].resetFields();
        },
        changeTime(e){
            if(e&&e.length){
                this.form.start_time = e[0];
                this.form.stop_time = e[1];
            }else{
                this.form.start_time = '';
                this.form.stop_time = '';
            }
        },
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore({customize_id: localStorage.getItem('customize_id') || ''});
            if(code){
                this.shopList = data;
            }
        },
        init(type){
            if(type){
                this.form = this.$options.data().form;
            }
            this.page = 1;
            this.getList();
            this.tableData = [];
            this.canscroll = false;
            this.activeisload = false;
        },
        //门店远程搜索
        async remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                    let {code,data} = await this.$Http.storegetGoods()
                    this.loading = false;
                    this.options = this.list.filter(item => {
                    return item.label.toLowerCase()
                        .indexOf(query.toLowerCase()) > -1;
                    });
                } else {
                this.options = [];
            }
        },
        async getList(){
            this.loading = true;
            this.form.start_time=this.form.start_time>0?this.form.start_time/1000:this.form.start_time
            this.form.stop_time=this.form.stop_time>0?this.form.stop_time/1000:this.form.stop_time

            this.form.customize_id = localStorage.getItem('customize_id') || '' // 菜单customize_id
            let {code,data} = await this.$Http.getStaff(this.form);
            this.loading = false;
            if(code){
                this.tableData = data.data;
                this.form.total = data.total;
                // this.tableData = [... this.tableData,...data.data];
                // if ( this.tableData.length < this.form.total) {
                //     this.activeisload = false;
                //     console.log("已加载完");
                // } else {
                //     this.canscroll = true;
                // }
            }
        },
        pickerDate(){

        },
        change(){

        }
    },
};
</script>

<style lang="scss" scoped>

.image-thumbnail{
    width: 130px;
    height: 130px;
}
.vs-search-box{
    display: flex;
    padding-right: 22px;
    justify-content: space-between;
    .right{
        width: 180px;
        // display: flex;
    }
}
.red{
    color: #f00 !important;
}
</style>